<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>业务处理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>



<body>
<div id="personmsg">

<!--    内容-->
    <el-card style="width: 100%; padding-bottom: 100px">
        <div slot="header" class="clearfix" style="display: flex">
            <div style="font-size: 24px; flex: 1">个人信息</div>
            <div style="flex: 1; text-align: right">
                <el-button size="small" type="primary" @click="edit">编辑</el-button>
            </div>
        </div>
        <div style="font-size: 18px;">
            <div style="width: 100px; margin: 0 auto; position: relative; padding-bottom: 20px">
                <img style="width: 100px; height: 100px; border-radius: 50%; " :src=`../../img/avatar_1.jpg` alt="">
                <input @change="upload" type="file" id="avatar" style="width: 100px; height: 100px; opacity: 0; position: absolute; top: 0; left: 0">
            </div>
            <el-row style="padding: 10px 0">
                <el-col :span="12" style="text-align: right">工号：</el-col>
                <el-col :span="12">{{user.jobnum}}</el-col>
            </el-row>
            <el-row style="padding: 10px 0">
                <el-col :span="12" style="text-align: right">姓名：</el-col>
                <el-col :span="12">{{user.jobnum}}</el-col>
            </el-row>
            <el-row style="padding: 10px 0">
                <el-col :span="12" style="text-align: right">电话：</el-col>
                <el-col :span="12">{{user.jobnum}}</el-col>
            </el-row>
            <el-row style="padding: 10px 0">
                <el-col :span="12" style="text-align: right">身份证号：</el-col>
                <el-col :span="12">{{user.jobnum}}</el-col>
            </el-row>

        </div>
    </el-card>
</div>

</body>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>

<script type="text/javascript">
<!--    js内容 -->
new Vue({
    el: "#personmsg",
    data: {
        user: {},
        isCollapse: false,
        entity: {},
        dialogFormVisible: false
    },
    created() {
        this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
        this.load();
    },
    methods: {
        handleCollapse() {
            this.isCollapse = !this.isCollapse;
        },
        edit() {
            this.dialogFormVisible = true;
        },
        load() {
            $.get("/user/detail/" + this.user.jobnum).then(res => {
                this.user = res.data;
            })
        },
        save() {
            $.ajax({
                url: "/user",
                type: "PUT",
                contentType: "application/json",
                data: JSON.stringify(this.user)
            }).then(res => {
                if (res.code === '0') {
                    this.$message({
                        message: "保存成功",
                        type: "success"
                    });
                    this.load();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    })
                }
                this.dialogFormVisible = false;
            })
        },
        upload() {
            let formData = new FormData();
            formData.append("file", $("#avatar")[0].files[0])
            $.ajax({
                url: '/files/upload',
                processData: false,
                contentType: false,
                type: 'POST',
                data: formData
            }).then(res => {
                if(res.code === '0') {
                    this.$message({
                        type: "success",
                        message: "上传成功"
                    });
                    this.user.avatar = res.data;
                    sessionStorage.setItem("user", JSON.stringify(this.user))
                    // 更新用户信息
                    $.ajax({
                        url: '/user',
                        type: 'POST',
                        contentType: "application/json",
                        data: JSON.stringify(this.user)
                    });
                }
            })
        }
    }
})


</script>



</html>